<template>
	<view v-if="show">
		<view class="fixed wrapper" >
			<view class="whiteBg abs chooseContainer animated slideInRight fastest">
				<view class=" ptb50">
					<view class="abs top pd10 bb">
						<view class="flex">
							<view @tap="chooseAll">
								<radio value="r1" :checked="checkAll" />
								全选
							</view>
						</view>
					</view>
					
					<view class="fixAuto middle" @tap="item.isChecked = !item.isChecked" :class="{bt:index>0}" v-for="( item , index) in myList" :key="index">
						<view>
							<view class="fixAutoNoPd middle">
								<view class="w30">
									<view class="square">
										<image class="rds3" :src="item.headImgUrl" mode="aspectFill"></image>
									</view>
								</view>
								<view class="pl10">{{item.realName}}</view>
							</view>
						</view>
						<view class="w30">
							<radio value="r1" :checked="item.isChecked" />
						</view>
					</view>
					
					<view class="abs bottom bt">
						<view class="gridNoMb">
							<view @tap="cancel">
								<view class="btn line block">取消</view>
							</view>
							<view @tap="confirm">
								<view class="btn block">确认</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
	
</template>

<script>
	export default {
		name : 'memberChooseList' ,
		props:{
			list : {
				type : Array ,
				default : function(e){
					return [] ;
				}
			},
			show : {
				default : false 
			}
		},
		
		data() {
			return {
				checkAll : false ,
				myList : []
			};
		},
		
		watch:{
			list : function(e , es){
				this.getMyList(e);
			},
		},
		
		methods:{
			
			getChoosedList:function(e){
				var list = [] ;
				for (var i = 0; i < this.myList.length; i++) {
					var cur = this.myList[i] ;
					if (cur.isChecked) {
						list.push(cur);
					}
				}
				return list ;
			},
			
			getMyList:function(curList){
				var list = [] ;
				for (var i = 0; i < curList.length; i++) {
					var cur = JSON.parse(JSON.stringify(curList[i])) ;
					cur['isChecked'] = false ;
					list.push(cur);
				}
				this.myList = list ;
			},
			
			chooseAll:function(e){
				this.checkAll = !this.checkAll ;
				for (var i = 0; i < this.myList.length; i++) {
					var cur = this.myList[i] ;
					cur.isChecked = this.checkAll ;
				}
			},
			
			confirm:function(e){
				this.$emit("confirm" , { value : this.getChoosedList() });
			},
			
			cancel:function(e){
				this.$emit("cancel" , e);
			},
			
		},
		
	}
</script>

<style lang="scss" scoped>
	.chooseContainer{
		left: 200upx;
		padding-bottom: constant(safe-area-inset-bottom); 
		padding-bottom: env(safe-area-inset-bottom);
	}
</style>
